import React, { useEffect, useState } from 'react'
import { NavigationStackScreenComponent } from 'react-navigation-stack'
import { View, ScrollView, Text, Image, TouchableOpacity } from 'react-native';
import { commonStyle } from 'styles'
import { RadiusButton, Toast } from 'components'
import assets from './assets'
import { changeProjectStyle } from './styles'
import pos from 'api/pos';
import { getAuthorization, setProject, operate } from 'services/authorization';
import { PosAppProjectOutput } from '../api/pos';
import Loading from 'components/loading';
import { navigate } from '../services/navigation';

const ChangeProjectScreen: NavigationStackScreenComponent = props => {
	const [projectList, setProjectList] = useState<PosAppProjectOutput>([])
	const [currProject, setCurrProject] = useState(getAuthorization().project)
	useEffect(() => {
		Loading.show();
		pos.posApp.getProject({ mac: getAuthorization().mac, id: getAuthorization().userId }).then(res => {
			setProjectList(res || [])
		}).finally(() => {
			Loading.hide();
		})
	}, [])
	const renderItem = (item: PosAppProjectOutput) => {
		return (


			<TouchableOpacity key={item.id}
				style={changeProjectStyle.itemContainer}
				onPress={() => {
					setCurrProject(item)
				}}>
				<Text style={changeProjectStyle.projectName}>{item.name}</Text>
				<Image
					style={changeProjectStyle.checkImage}
					source={item.id === currProject.id ? assets.images.icon_check : assets.images.icon_uncheck}
				/>
			</TouchableOpacity>

		)
	}

	return (
		<View style={[commonStyle.containerColumn, changeProjectStyle.container]}>
			<ScrollView keyboardShouldPersistTaps='always'>
				<View style={[commonStyle.containerColumn, changeProjectStyle.listContainer]}>
					{projectList.map(renderItem)}
				</View>
			</ScrollView>
			<RadiusButton style={changeProjectStyle.comfirmBtn} onPress={() => {
				setProject(currProject)
				navigate('AppHome')
			}}>
				<Text style={changeProjectStyle.btnText}>确认</Text>
			</RadiusButton>
		</View>
	)
}

ChangeProjectScreen.navigationOptions = props => {
	return {
		title: '选择项目',
	}
}

export default ChangeProjectScreen
